<template>
  <div>
      <div id="mainDiv" style="width:1280px;height:600px;">

      </div>
  </div>
</template>

<script>
export default {
    name: "echartComponent",
    methods: {
        initChart() {
            //基于准备好的dom，初始化echarts实例
            let myChart =this.$echarts.init(document.getElementById("mainDiv"));
            var emphasisStyle = {
                itemStyle: {
                    barBorderWidth: 1,
                    lineBorderWidth: 1,
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowColor: 'rgba(0,0,0,0.5)'
                }
            };
            //指定图标的配置项和数据
            let option = {
                    backgroundColor:  this.$echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
                        offset: 0,
                        color: '#ffffff'
                    }, {
                        offset: 1,
                        color: '#ffffff'
                    }]),
                    legend: {
                        data: ['継続', '離反', '新規', '店舗離反','店舗新規','H','M','L','H率','M率','L率','継続率','離反率','新規率'],
                        left: 10
                    },
                    toolbox: {
                        feature: {
                        saveAsImage: {
                            name:'sinkirihan_151518762011892112',
                            title:'ダウンロード',
                            type:'jpeg'
                        }
                    },
                    x:'90%'
                    },
                    tooltip: {
                        // 悬浮窗设置
                        formatter : function(param){
                            return param.seriesName +'<br/>'+ param.name+':'+param.value+'人'+'<br/>';       
                        }
                    },
                    xAxis: [{
                        data: ["201906-201907","201908-201909","201910-201911","201912-202001","202002-202003","202004-202004"],
                        name: '年月',
                        nameGap:40,
                        axisLabel: {
                            interval: 0,
                            rotate: 40
                        },
                        axisLine: {onZero: true},
                        splitLine: {show: false},
                        splitArea: {show: false}
                    }],
                    yAxis:[{
                        name: 'ID客数',
                        inverse: false, //反转
                        splitArea: {show: false},
                        splitLine:{
                            show:false  //不显示坐标轴分隔线
                        }
                    },{ 
                        type:'value',
                        scale: true,
                        name:'率',
                        splitArea: {show: false}, 
                        axisLabel:{
                            formatter: '{value}%'
                        },
                        splitLine:{
                            show:false  //不显示坐标轴 分隔线
                        }
                    }],
                    grid: {
                        top:60,
                        left: 100,
                        right:70,
                        bottom:100
                    },
                    series: [
                        {
                            name: '継続',
                            type: 'bar',
                            stack: 'one',
                            color: '#59C2D5',
                            emphasis: emphasisStyle,
                            barGap : '0%',
                            data: ["21639","27390","25983","23024","21591","18502"]
                        },
                        {
                            name: '継続率',
                            type: 'line',
                            yAxisIndex: 1,
                            symbolSize:12,
                            color: '#59C2D5',
                            emphasis: emphasisStyle,
                            tooltip: {
                            // 悬浮窗设置
                            formatter : function(param){
                                return param.seriesName+':'+param.value+'%'+'<br/>'     
                            }
                            },
                            data: ["_","10.5","14.0","13.8","13.7","18.1"]
                        },
                        {
                            name: '離反',
                            type: 'bar',
                            stack: 'one',
                            color: '#F07BED',
                            emphasis: emphasisStyle,
                            data: ["0","-4648","-7416","-6997","-6497","-6570"]
                        },
                        {
                            name: '離反率',
                            type: 'line',
                            yAxisIndex: 1,
                            symbolSize:12,
                            color: '#F07BED',
                            emphasis: emphasisStyle,
                            tooltip: {
                            // 悬浮窗设置
                            formatter : function(param){
                                return param.seriesName+':'+param.value+'%'+'<br/>';
                            }
                            },
                            data: ["_","-4.6","-8.0","-8.4","-7.9","-9.2"]
                        },
                        {
                            name: '新規',
                            type: 'bar',
                            stack: 'one',
                            color: '#9CC5B2',
                            emphasis: emphasisStyle,
                            data: ["7224","6130","3930","5099","5469","4172"]
                        },
                        {
                            name: '新規率',
                            type: 'line',
                            yAxisIndex: 1,
                            symbolSize:12,
                            color: '#9CC5B2',
                            emphasis: emphasisStyle,
                            tooltip: {
                            // 悬浮窗设置
                            formatter : function(param){
                                return param.seriesName+':'+param.value+'%'+'<br/>';
                            }
                            },
                            data: ["18.8","12.3","10.7","11.8","13.3","12.7"]
                        },
                        {
                            name: '店舗離反',
                            type: 'bar',
                            stack: 'one',
                            xAxisIndex:0,
                            color: '#51616D',
                            emphasis: emphasisStyle,
                            data: ["0","5561","6911","5243","5107","6939"]
                        },
                        {
                            name: '店舗新規',
                            type: 'bar',
                            stack: 'one',
                            xAxisIndex:0,
                            color: '#BDD7EE',
                            barMaxWidth: '40',
                            emphasis: emphasisStyle,
                            data: ["8736","6790","5351","5072","4951","2885"]
                        },
                        {
                            name: 'H率',
                            type: 'line',
                            yAxisIndex: 1,
                            symbolSize:12,
                            color: '#4F81BD',
                            emphasis: emphasisStyle,
                            tooltip: {
                            // 悬浮窗设置
                            formatter : function(param){
                                return param.seriesName+':'+param.value+'%'+'<br/>'   
                            }
                            },
                            data: ["3.6","3.7","3.0","3.8","3.5","3.2"]
                        },
                        {
                            name: 'M率',
                            type: 'line',
                            yAxisIndex: 1,
                            symbolSize:12,
                            color: '#8EB4E3',
                            emphasis: emphasisStyle,
                            tooltip: {
                            // 悬浮窗设置
                            formatter : function(param){
                                return param.seriesName+':'+param.value+'%'+'<br/>'    
                            }
                            },
                            data: ["5.8","6.5","5.6","6.2","6.8","5.8"]
                        },
                        {
                            name: 'L率',
                            type: 'line',
                            yAxisIndex: 1,
                            symbolSize:12,
                            color: '#B9CDE5',
                            emphasis: emphasisStyle,
                            tooltip: {
                            // 悬浮窗设置
                            formatter : function(param){
                                return param.seriesName+':'+param.value+'%'+'<br/>'      
                            }
                            },
                            data: ["3.8","3.5","3.6","4.2","3.8","3.8"]
                        },
                        {
                            name: 'H',
                            type: 'bar',
                            stack: 'two',
                            color: '#4F81BD',
                            emphasis: emphasisStyle,
                            data: ["5000","12450","43500","5400","5700","5500"]
                        },
                        {
                            name: 'M',
                            type: 'bar',
                            stack: 'two',
                            color: '#8EB4E3',
                            emphasis: emphasisStyle,
                            data: ["5000","4450","1500","6400","6700","6500"]
                        },{
                            name: 'L',
                            type: 'bar',
                            stack: 'two',
                            color: '#B9CDE5',
                            barMaxWidth: '40',
                            emphasis: emphasisStyle,
                            data: ["2000","4450","8500","7400","7700","8500"]
                        }
                    ]
                };
            //使用配置项和数据显示图表
            myChart.setOption(option);
        }
    },
    mounted(){
        this.initChart();
    }
}
</script>